FedMCP - Federal Parliamentary Information

/**
 * FedMCP Installation Page
 * One-click install instructions for Claude Code and Claude Desktop
 */

import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { Card } from '@canadagpt/design-system';
import { MapleLeafIcon } from '@canadagpt/design-system';
import Link from 'next/link';
import {
  Terminal,
  Monitor,
  CheckCircle2,
  ExternalLink,
  Shield,
  Zap,
  Database,
  Search,
  Scale,
  FileText,
  Users,
  DollarSign,
  Building2,
  MessageSquare,
  Key,
  Gauge,
} from 'lucide-react';
import { Metadata } from 'next';
import { CopyableCodeBlock } from '@/components/CopyableCodeBlock';
import { InstallPromptBox } from '@/components/fedmcp/InstallPromptBox';

export const metadata: Metadata = {
  title: 'Install FedMCP - Canadian Government Data for Claude | CanadaGPT',
  description:
    'One-click installation of FedMCP - 86+ MCP tools for accessing Canadian parliamentary debates, MP voting records, lobbying data, and more in Claude. PRO subscribers get 11 exclusive accountability tools.',
  openGraph: {
    title: 'Install FedMCP - Canadian Government Data for Claude',
    description:
      '86+ tools for Canadian parliamentary data, MP expenses, lobbying, and more. PRO: 11 exclusive accountability tools.',
  },
};

export default function FedMCPPage() {
  const claudeCodeInstall =
    'curl -fsSL https://raw.githubusercontent.com/northernvariables/CanadaGPT/main/packages/fedmcp/scripts/install-claude-code.sh | bash';
  const claudeDesktopInstall =
    'curl -fsSL https://raw.githubusercontent.com/northernvariables/CanadaGPT/main/packages/fedmcp/scripts/install-claude-desktop.sh | bash';

  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="flex-1 page-container max-w-4xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="flex items-center justify-center gap-3 mb-4">
            <MapleLeafIcon size={48} className="h-12 w-12 text-accent-red" />
          </div>
          <h1 className="text-4xl font-bold text-text-primary mb-4">
            Install FedMCP
          </h1>
          <p className="text-xl text-text-secondary max-w-2xl mx-auto">
            86+ MCP tools for Canadian federal government data in Claude Code
            and Claude Desktop
          </p>
          <div className="flex flex-wrap justify-center gap-2 mt-4">
            <span className="px-3 py-1 bg-accent-red/20 text-accent-red rounded-full text-sm font-medium">
              86+ Tools
            </span>
            <span className="px-3 py-1 bg-accent-red/20 text-accent-red rounded-full text-sm font-medium">
              8+ Data Sources
            </span>
            <span className="px-3 py-1 bg-accent-red/20 text-accent-red rounded-full text-sm font-medium">
              One-Click Install
            </span>
          </div>
        </div>

        {/* Quick Install Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          {/* Claude Code */}
          <Card elevated className="relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-1 bg-accent-red" />
            <div className="flex items-center gap-3 mb-4">
              <Terminal className="h-8 w-8 text-accent-red" />
              <div>
                <h2 className="text-xl font-bold text-text-primary">
                  Claude Code
                </h2>
                <p className="text-sm text-text-secondary">Terminal / CLI</p>
              </div>
            </div>
            <CopyableCodeBlock
              code={claudeCodeInstall}
              label="Claude Code install command"
            />
            <p className="text-sm text-text-secondary mt-3">
              Installs FedMCP and auto-configures permissions for all tools.
            </p>
          </Card>

          {/* Claude Desktop */}
          <Card elevated className="relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-1 bg-accent-red" />
            <div className="flex items-center gap-3 mb-4">
              <Monitor className="h-8 w-8 text-accent-red" />
              <div>
                <h2 className="text-xl font-bold text-text-primary">
                  Claude Desktop
                </h2>
                <p className="text-sm text-text-secondary">macOS / Windows</p>
              </div>
            </div>
            <CopyableCodeBlock
              code={claudeDesktopInstall}
              label="Claude Desktop install command"
            />
            <p className="text-sm text-text-secondary mt-3">
              Then restart Claude Desktop to load the tools.
            </p>
          </Card>
        </div>

        {/* Gordie System Prompt */}
        <InstallPromptBox />

        {/* Rate Limits by Tier */}
        <Card className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <Gauge className="h-6 w-6 text-accent-red" />
            <h2 className="text-2xl font-bold text-text-primary">
              Rate Limits by Tier
            </h2>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border-default">
                  <th className="text-left py-3 px-4 font-semibold text-text-primary">
                    Tier
                  </th>
                  <th className="text-left py-3 px-4 font-semibold text-text-primary">
                    Rate Limit
                  </th>
                  <th className="text-left py-3 px-4 font-semibold text-text-primary">
                    Tools
                  </th>
                  <th className="text-left py-3 px-4 font-semibold text-text-primary">
                    API Keys
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-border-subtle">
                  <td className="py-3 px-4">
                    <span className="px-2 py-1 bg-gray-500/20 text-gray-400 rounded text-xs font-medium">
                      FREE
                    </span>
                  </td>
                  <td className="py-3 px-4 text-text-secondary">100/hour</td>
                  <td className="py-3 px-4 text-text-secondary">
                    86 standard tools
                  </td>
                  <td className="py-3 px-4 text-text-secondary">No</td>
                </tr>
                <tr className="border-b border-border-subtle">
                  <td className="py-3 px-4">
                    <span className="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs font-medium">
                      BASIC
                    </span>
                  </td>
                  <td className="py-3 px-4 text-text-secondary">1,000/hour</td>
                  <td className="py-3 px-4 text-text-secondary">
                    86 standard tools
                  </td>
                  <td className="py-3 px-4 text-text-secondary">Yes</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">
                    <span className="px-2 py-1 bg-amber-500/20 text-amber-400 rounded text-xs font-medium">
                      PRO
                    </span>
                  </td>
                  <td className="py-3 px-4 text-text-secondary">10,000/hour</td>
                  <td className="py-3 px-4 text-text-secondary">
                    86 standard + 11 premium
                  </td>
                  <td className="py-3 px-4 text-text-secondary">Yes</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="text-sm text-text-secondary mt-4">
            <Link href="/pricing" className="text-accent-red hover:underline">
              View pricing
            </Link>{' '}
            to upgrade your tier.
          </p>
        </Card>

        {/* What's Included */}
        <Card className="mb-8">
          <h2 className="text-2xl font-bold text-text-primary mb-6">
            What&apos;s Included
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <MessageSquare className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  Parliamentary Debates
                </h3>
                <p className="text-sm text-text-secondary">
                  Search Hansard transcripts
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Users className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">MP Data</h3>
                <p className="text-sm text-text-secondary">
                  Voting records & activity
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <DollarSign className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">MP Expenses</h3>
                <p className="text-sm text-text-secondary">
                  Quarterly disclosure data
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <FileText className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  Bill Tracking
                </h3>
                <p className="text-sm text-text-secondary">
                  Legislative progress
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Building2 className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  Lobbying Registry
                </h3>
                <p className="text-sm text-text-secondary">
                  100K+ registrations
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Scale className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">Case Law</h3>
                <p className="text-sm text-text-secondary">
                  CanLII legal search
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Database className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  Federal Contracts
                </h3>
                <p className="text-sm text-text-secondary">
                  Government spending
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Search className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  Fact-Checking
                </h3>
                <p className="text-sm text-text-secondary">
                  Verify claims with data
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-bg-secondary">
              <Zap className="h-5 w-5 text-accent-red mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text-primary">
                  And More...
                </h3>
                <p className="text-sm text-text-secondary">86+ tools total</p>
              </div>
            </div>
          </div>
        </Card>

        {/* Premium Features (PRO) */}
        <Card className="mb-8 border-amber-500/30 bg-amber-900/30">
          <div className="flex items-center gap-2 mb-4">
            <Shield className="h-6 w-6 text-amber-600" />
            <h2 className="text-2xl font-bold text-text-primary">
              Premium Features
            </h2>
            <span className="px-2 py-0.5 bg-amber-500 text-white text-xs font-bold rounded">
              PRO
            </span>
          </div>
          <p className="text-text-secondary mb-4">
            PRO subscribers get access to 11 exclusive accountability tools
            powered by the CanadaGPT graph database with cross-referenced data:
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  MP Performance Scorecards
                </span>
                <p className="text-xs text-text-secondary">
                  Comprehensive metrics on attendance, votes, speeches
                </p>
              </div>
            </div>
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  Conflict of Interest Detection
                </span>
                <p className="text-xs text-text-secondary">
                  Graph-based analysis of donations, lobbying, voting
                </p>
              </div>
            </div>
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  Money Flow Tracing
                </span>
                <p className="text-xs text-text-secondary">
                  Track org connections to government contracts, grants
                </p>
              </div>
            </div>
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  Cross-Reference Search
                </span>
                <p className="text-xs text-text-secondary">
                  Find entity mentions across all debates
                </p>
              </div>
            </div>
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  Enriched Bill Data
                </span>
                <p className="text-xs text-text-secondary">
                  Bills with lobbying activity & vote correlation
                </p>
              </div>
            </div>
            <div className="flex items-start gap-2 p-2 rounded bg-bg-secondary">
              <CheckCircle2 className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-medium text-text-primary text-sm">
                  Committee Activity Metrics
                </span>
                <p className="text-xs text-text-secondary">
                  Meeting frequency, witness tracking, MP participation
                </p>
              </div>
            </div>
          </div>
        </Card>

        {/* API Access for Higher Rate Limits */}
        <Card className="mb-8 border-blue-500/30 bg-blue-900/30">
          <div className="flex items-start gap-4">
            <Key className="h-8 w-8 text-blue-600 flex-shrink-0" />
            <div className="flex-1">
              <h2 className="text-xl font-bold text-text-primary mb-2">
                API Access
              </h2>
              <p className="text-text-secondary mb-4">
                <strong>BASIC</strong> and <strong>PRO</strong> subscribers can generate API keys to authenticate MCP tools.
                Set the{' '}
                <code className="bg-bg-secondary px-2 py-0.5 rounded">
                  FEDMCP_API_KEY
                </code>{' '}
                environment variable for higher rate limits. PRO subscribers also unlock{' '}
                <strong>11 exclusive accountability tools</strong>{' '}
                including conflict detection, money tracing, and MP scorecards.
              </p>
              <Link
                href="/settings#fedmcp-keys"
                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold"
              >
                Manage API Keys in Settings
                <ExternalLink className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </Card>

        {/* Auto-Approve Permissions */}
        <Card className="mb-8 border-accent-red/30">
          <div className="flex items-start gap-4">
            <Shield className="h-8 w-8 text-accent-red flex-shrink-0" />
            <div className="flex-1">
              <h2 className="text-xl font-bold text-text-primary mb-2">
                Auto-Approve All Permissions
              </h2>
              <p className="text-text-secondary mb-4">
                The installer automatically configures Claude Code to approve
                all FedMCP tools without individual prompts.
              </p>
              <p className="text-sm text-text-secondary mb-3">
                This is done by adding to{' '}
                <code className="bg-bg-secondary px-2 py-0.5 rounded">
                  ~/.claude/settings.json
                </code>
                :
              </p>
              <CopyableCodeBlock
                code={`{
  "permissions": {
    "allow": ["mcp__fedmcp__*"]
  }
}`}
                label="permissions config"
              />
              <p className="text-sm text-text-secondary mt-3">
                The pattern{' '}
                <code className="bg-bg-secondary px-2 py-0.5 rounded">
                  mcp__fedmcp__*
                </code>{' '}
                matches all tools from the FedMCP server.
              </p>
            </div>
          </div>
        </Card>

        {/* Manual Installation */}
        <Card className="mb-8">
          <h2 className="text-2xl font-bold text-text-primary mb-6">
            Manual Installation
          </h2>

          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-text-primary mb-3 flex items-center gap-2">
                <Terminal className="h-5 w-5 text-accent-red" />
                Claude Code
              </h3>
              <div className="space-y-4 ml-7">
                <div>
                  <p className="text-sm text-text-secondary mb-2">
                    1. Install Python package:
                  </p>
                  <CopyableCodeBlock
                    code="pip install git+https://github.com/northernvariables/CanadaGPT.git#subdirectory=packages/fedmcp"
                    label="pip install"
                  />
                </div>
                <div>
                  <p className="text-sm text-text-secondary mb-2">
                    2. Add MCP server:
                  </p>
                  <CopyableCodeBlock
                    code="claude mcp add --transport stdio --scope user fedmcp -- python -m fedmcp.server"
                    label="mcp add"
                  />
                </div>
                <div>
                  <p className="text-sm text-text-secondary mb-2">
                    3. Enable auto-approval (edit{' '}
                    <code className="bg-bg-secondary px-1 rounded">
                      ~/.claude/settings.json
                    </code>
                    ):
                  </p>
                  <CopyableCodeBlock
                    code='{"permissions":{"allow":["mcp__fedmcp__*"]}}'
                    label="settings.json"
                  />
                </div>
              </div>
            </div>

            <hr className="border-border-default" />

            <div>
              <h3 className="text-lg font-semibold text-text-primary mb-3 flex items-center gap-2">
                <Monitor className="h-5 w-5 text-accent-red" />
                Claude Desktop
              </h3>
              <div className="space-y-4 ml-7">
                <div>
                  <p className="text-sm text-text-secondary mb-2">
                    1. Install Python package:
                  </p>
                  <CopyableCodeBlock
                    code="pip install git+https://github.com/northernvariables/CanadaGPT.git#subdirectory=packages/fedmcp"
                    label="pip install"
                  />
                </div>
                <div>
                  <p className="text-sm text-text-secondary mb-2">
                    2. Edit config file:
                  </p>
                  <ul className="text-sm text-text-secondary mb-2 space-y-1">
                    <li>
                      <strong>macOS:</strong>{' '}
                      <code className="bg-bg-secondary px-1 rounded">
                        ~/Library/Application
                        Support/Claude/claude_desktop_config.json
                      </code>
                    </li>
                    <li>
                      <strong>Windows:</strong>{' '}
                      <code className="bg-bg-secondary px-1 rounded">
                        %APPDATA%\Claude\claude_desktop_config.json
                      </code>
                    </li>
                  </ul>
                  <CopyableCodeBlock
                    code={`{
  "mcpServers": {
    "fedmcp": {
      "command": "python",
      "args": ["-m", "fedmcp.server"]
    }
  }
}`}
                    label="config.json"
                  />
                </div>
                <div>
                  <p className="text-sm text-text-secondary">
                    3. Restart Claude Desktop
                  </p>
                </div>
              </div>
            </div>
          </div>
        </Card>

        {/* Example Prompts */}
        <Card className="mb-8">
          <h2 className="text-2xl font-bold text-text-primary mb-4">
            Try These Prompts
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {[
              'What bills are being debated in Parliament?',
              "Show me Pierre Poilievre's voting record",
              'Who is lobbying on artificial intelligence?',
              'Find MP expenses over $10,000',
              'Find my MP by postal code K1A 0A6',
              'Track progress of Bill C-234',
            ].map((prompt, i) => (
              <div
                key={i}
                className="p-3 bg-bg-secondary rounded-lg text-text-secondary text-sm"
              >
                &quot;{prompt}&quot;
              </div>
            ))}
          </div>
          <div className="mt-4 pt-4 border-t border-border-default">
            <div className="flex items-center gap-2 mb-3">
              <span className="px-2 py-0.5 bg-amber-500 text-white text-xs font-bold rounded">
                PRO
              </span>
              <span className="text-sm font-medium text-text-primary">
                Premium Prompts
              </span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {[
                'Get performance scorecard for Pierre Poilievre',
                'Detect conflicts of interest for Mark Holland',
                'Trace money flow from SNC-Lavalin to government',
                'Find all cross-references to Bill C-234 in debates',
              ].map((prompt, i) => (
                <div
                  key={i}
                  className="p-3 bg-amber-900/40 rounded-lg text-text-secondary text-sm border border-amber-800"
                >
                  &quot;{prompt}&quot;
                </div>
              ))}
            </div>
          </div>
        </Card>

        {/* Verify Installation */}
        <Card className="mb-8">
          <h2 className="text-2xl font-bold text-text-primary mb-4 flex items-center gap-2">
            <CheckCircle2 className="h-6 w-6 text-green-500" />
            Verify Installation
          </h2>
          <div className="space-y-4">
            <div>
              <p className="text-sm text-text-secondary mb-2">
                <strong>Claude Code:</strong>
              </p>
              <CopyableCodeBlock code="claude mcp list" label="verify" />
              <p className="text-sm text-text-secondary mt-2">
                Or use{' '}
                <code className="bg-bg-secondary px-1 rounded">/mcp</code>{' '}
                inside a Claude Code session.
              </p>
            </div>
            <div>
              <p className="text-sm text-text-secondary">
                <strong>Claude Desktop:</strong> Look for the tools icon and
                verify FedMCP tools appear in the list.
              </p>
            </div>
          </div>
        </Card>

        {/* Links */}
        <Card className="text-center">
          <h2 className="text-xl font-bold text-text-primary mb-4">
            Resources
          </h2>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href="https://github.com/northernvariables/CanadaGPT/tree/main/packages/fedmcp"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-4 py-2 bg-accent-red text-white rounded-lg hover:bg-accent-red-hover transition-colors font-semibold"
            >
              GitHub <ExternalLink className="h-4 w-4" />
            </a>
            <a
              href="/fedmcp/install.txt"
              target="_blank"
              className="inline-flex items-center gap-2 px-4 py-2 border border-border-emphasis text-text-primary rounded-lg hover:border-accent-red transition-colors font-semibold"
            >
              Plain Text Instructions
            </a>
            <a
              href="https://modelcontextprotocol.io"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-4 py-2 border border-border-emphasis text-text-primary rounded-lg hover:border-accent-red transition-colors font-semibold"
            >
              MCP Protocol <ExternalLink className="h-4 w-4" />
            </a>
          </div>
        </Card>
      </main>

      <Footer />
    </div>
  );
}